<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>判断鼠标滑过的方向 并改变盒子颜色</title>
	<script src="js/jquery-1.8.3.min.js"></script>
</head>
<style type="text/css">
#box{width: 200px;height: 200px;border:1px solid #999;margin: 200px auto;position:relative;zoom:1;overflow: hidden;}
#bbox{width: 200px;height: 200px;border:1px solid #999;margin: 50px auto;position:relative;zoom:1;overflow: hidden;}
.box1{height: 200px;background-color: orange;text-align: center;line-height: 200px;}
.box2{position: absolute;left: -200px;top: -200px;width: 200px;height: 200px;background-color: #f00;text-align: center;line-height: 200px;}

ul{margin:0;padding:0}
li{list-style:none;}
.flexBox{
	display:flex;
	flex-direction:row;
	<!-- flex-direction:column -->
	flex-wrap:wrap;
	
	align-items:flex-end 
}
.lis li{flex:1 6;text-align:center;word-break:break-all;word-wrap:break-word}
.lis li:nth-child(2){flex:2 6;}

html,body {
scrollbar-face-color:#FB4446; /*滚动条3D表面（ThreedFace）的颜色*/
scrollbar-highlight-color:#fff; /*滚动条3D界面的亮边（ThreedHighlight）颜色*/
scrollbar-shadow-color:#eeeeee; /*滚动条3D界面的暗边（ThreedShadow）颜色*/
scrollbar-3dlight-color:#eeeeee; /*滚动条亮边框颜色*/
scrollbar-arrow-color:#000; /*滚动条方向箭头的颜色 */
scrollbar-track-color:#fff; /*滚动条的拖动区域(TrackBar)颜色*/
scrollbar-darkshadow-color:#fff; /*滚动条暗边框（ThreedDarkShadow）颜色*/ }

/*---滚动条默认显示样式--*/ 
::-webkit-scrollbar-thumb{ 
   background-color:#f00;  /*滚动条本身颜色*/
   height:50px; 
   outline-offset:-2px; 
   outline:2px solid #ff0; 
   -webkit-border-radius:4px; /*滚动条圆角*/
   border: 2px solid #ccc;/*滚动条外框颜色*/
} 
/*---鼠标点击滚动条显示样式--*/ 
::-webkit-scrollbar-thumb:hover{ 
   background-color:#F01360; 
   height:50px; 
   -webkit-border-radius:4px; 
} 
/*---滚动条大小--*/ 
::-webkit-scrollbar{ 
   width:8px; 
   height:8px; 
} 
/*---滚动框背景样式--*/ 
::-webkit-scrollbar-track-piece{ 
   background-color:#00f; /*滚动条下面的整个竖条颜色*/
   -webkit-border-radius:0; 
}

</style>
<body>
	<div style="position:relative;height:60px;">
		 <div style="position:absolute;left:0;width:200px;background:#f00" class="a b">我在左边</div>
		<div style="position:absolute;left:100px;right:100px;width:calc(100% - 200px);background:#ff0">我在中间</div>
		<div style="position:absolute;right:0;width:200px;background:#00f">我在右边</div>
	</div>
	<div style="width:100%;height:60px;">
		<div style="width:50%;float:left;background:#f00;margin:0 0 0 -300px;">
			<div style="margin:0 0 0 300px">我在左边</div>
		</div>
		<div style="width:600px;float:left;background:#ff0;">
			<div >我在中间</div>
		</div>
		<div style="width:50%;float:left;background:#00f;margin:0 0 0 -300px">
			<div style="margin:0 0 0 300px">我在右边</div>
		</div>
	</div>
	<div style="display:table;">
		<div style="display:table-cell;vertical-align:middle">我我我我我我我我我我我我我我我我我我我我我我我我</div>
	</div>
	<div class="lis" style="width:500px;height:60px;background:#ff0;">
		<ul class="flexBox">
			<li style="background:#f02">11111111111</li>
			<li style="background:#00f">222222</li>
			<li style="background:#d34">33333333333333333333</li>
		</ul>
	</div>
<!--No.1-->
<!--开始写代码-->
	<div id="box">
		<div class="box1">
			#box1
		</div>
		<div class="box2">
			#box2
		</div>
	</div>
<div  id="bg" style="width:300px;height:200px;">
<ul>
	<li>www</li>
	<li>rrrrrr</li>
	<li>eee</li>
</ul>
<input type="checkbox" id="1"/>
<input type="checkbox" id="2"/>
<input type="checkbox" id="3"/>
<input type="checkbox" id="4"/>
</div>
	<script type="text/javascript">
		 $(function() {
	$("#box,#bbox").on("mouseenter mouseleave",function(e) {
		var w = $(this).width();
		var h = $(this).height();
		var x=(e.pageX-this.offsetLeft-(w/2))*(w>h?(h/w):1);
		var y=(e.pageY-this.offsetTop-(h/2))*(h>w?(w/h):1);
		var dirNum=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;
		//alert(dirNum);

		var eventType = e.type;
		var aPos=[{left:0,top:-200},{left:200,top:0},{left:0,top:200},{left:-200,top:0}];
		if(eventType == 'mouseenter'){
			$(this).find(".box2").css(aPos[dirNum]).stop(true,true).animate({left:0,top:0},200);
			if(aPos[dirNum].left == 200){
				$(".box2").css({"background":"#00f"})
			}else if(aPos[dirNum].left == (-200)){  //zuo
				$(".box2").css({"background":"#ff0"})
			}else if(aPos[dirNum].top == 200){
				$(".box2").css({"background":"#186b0d"})
			}else{
				$(".box2").css({"background":"#fd1f43"})
			}
		}else{  //mouseout
			$(this).find(".box2").stop(true,true).animate(aPos[dirNum],200);
		}
	});
});
$(function(){
	var s="aaaabbbdddeeeeedf";
	function ss(s){
		var obj={};
		for(var i=0;i<s.length;i++){
		var v=s.charAt(i);
			if(obj[v] && obj[v].value==v){
				obj[v].count=++obj[v].count;
				console.log(obj[v].count);
			}else{
				obj[v]={};
				obj[v].count=1;
				obj[v].value=v;
			}
		}
		return obj;
	}
	var reg = new RegExp("abc") ;
	var str = "3abc4，5abc6";

function Person(name, age){
	this.name=name;
	this.age=age;
	this.say=function(){
		alert("2");
	}
}
Person.prototype.s=function(){
	alert(34)
}
var f = new Person();

function Child(name, age){
	Person.apply(this,[ name, age]);
}
var aa = new Child("a",22);

//console.log(aa.say());


});

	</script>

</body>
</html>